<template>
  <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.pageIndex" :page-sizes="[10,15,20,50,100]" :page-size="pagination.pageSize" :layout="layout" :total="pagination.dataCount">
  </el-pagination>
</template>

<script>
export default {
  props: {
    pagination: {
      type: Object,
      default: function () {
        return Object
      }
    },
    notLayout: {
      type: String
    }
  },
  data() {
    return {
      pageIndex: 1,
      pageSize: 15,
      layout: 'total,sizes,prev,pager,next,jumper'
    }
  },
  watch: {
    pagination: function (newValue) {
      this.pageSize = newValue.pageSize;
    }
  },
  mounted() {
    this.pageSize = this.pagination.pageSize;
    if (this.notLayout) {
      this.layout = this.layout.replace(this.notLayout, '').replace(',,', ',');
      if (this.layout.indexOf(',') === 0) {
        this.layout = this.layout.substring(1);
      }
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      if (Math.ceil(this.pagination.dataCount / val) < this.pageIndex) return;
      this.$emit("handleSizeChange", { pageIndex: this.pageIndex, pageSize: this.pageSize });
    },
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.$emit("handleCurrentChange", { pageIndex: this.pageIndex, pageSize: this.pageSize });
    },

  }
}
</script>

<style>
.el-pagination {
  margin-top: 15px;
  /* text-align: right; */
}
</style>
